<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        如何实现浏览器内多个标签页之间的通信
            1. 使用 localStorage 或 sessionStorage
            2.postMessage

        H5离线存储怎么使用
            H5 离线存储（通常指 HTML5 Application Cache，简称 AppCache）是一种让 Web 应用在没有网络连接的情况下依然可以正常运行的技术。
            然而，需要注意的是：AppCache 已经被现代浏览器弃用（deprecated），并被更强大、更灵活的 Service Worker 和 Cache API 所取代

            -1. 工作原理
                AppCache 的核心思想是：通过一个清单文件（manifest file）告诉浏览器哪些资源需要被缓存，以便在离线时使用。
                浏览器第一次访问带有 manifest 的页面时，会下载并缓存清单中列出的所有资源。
                后续访问时，即使没有网络，浏览器也会从本地缓存加载页面和资源。
                当清单文件本身发生变化时，浏览器会重新下载所有资源并更新缓存

            -2. 使用方法--Apache被弃用
            (1) 创建一个 .appcache 或 .manifest 文件
                CACHE MANIFEST
                # v1.0.0
                CACHE:
                /index.html
                /style.css
                /app.js
                /image.png
                NETWORK:
                /api/*
                FALLBACK:
                / /offline.html
            (2) 在 HTML 中引用 manifest 文件
                <!DOCTYPE html>
                <html manifest="cache.manifest">
                <head>
                <title>离线应用</title>
                </head>
                <body>
                <h1>Hello Offline World</h1>
                </body>
                </html>
            (3) 服务器配置 MIME 类型
                text/cache-manifest
                AddType text/cache-manifest .manifest


        二、现代替代方案：Service Worker + Cache API（推荐）

            (1) 注册 Service Worker
                main.js

            if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                .then(reg => console.log('SW registered:', reg.scope))
                .catch(err => console.log('SW registration failed:', err));
            });
            }

            (2) 创建 sw.js 文件
                const CACHE_NAME = 'my-app-v1';
                const urlsToCache = [
                '/',
                '/index.html',
                '/style.css',
                '/app.js',
                '/image.png'
                ];

                安装阶段：缓存资源
                self.addEventListener('install', event => {
                event.waitUntil(
                    caches.open(CACHE_NAME)
                    .then(cache => cache.addAll(urlsToCache))
                );
                });

                激活阶段：清理旧缓存
                self.addEventListener('activate', event => {
                event.waitUntil(
                    caches.keys().then(keys =>
                    Promise.all(
                        keys.filter(key => key !== CACHE_NAME)
                            .map(key => caches.delete(key))
                    )
                    )
                );
                });

                拦截请求：优先返回缓存，否则请求网络
                self.addEventListener('fetch', event => {
                event.respondWith(
                    caches.match(event.request)
                    .then(response => {
                        return response || fetch(event.request);
                    })
                );
                });
    -->
</body>
</html>